<template>
  <div class="more-container">
    <el-form
      class="topstudentform"
      ref="topstudentform"
      :model="topstudentforms"
      size="small"
      label-width="92px"
      style="margin-top: 10px"
    >
      <el-row>
        <el-col :span="4">
          <el-form-item label-width="0" prop="startTime">
            <el-date-picker
              v-model="topstudentforms.startTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :style="{ width: '93%' }"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0" prop="branchId">
            <el-select
              clearable
              v-model="topstudentforms.branchId"
              placeholder="所属机构"
              multiple
              collapse-tags
              :style="{ width: '93%' }"
            >
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="(item, i) in chartData.ownTeam"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0" prop="carType">
            <el-select
              clearable
              v-model="topstudentforms.carType"
              placeholder="驾照类型"
              multiple
              collapse-tags
              :style="{ width: '93%' }"
            >
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="(item, i) in gettypeOptions"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0" prop="subject">
            <el-select
              clearable
              v-model="topstudentforms.subject"
              placeholder="考试科目"
              multiple
              collapse-tags
              :style="{ width: '93%' }"
            >
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="(item, i) in subjectList"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="3" class="fr">
          <el-row>
            <div class="rightbtn">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="searchlist"
              >
                查询
              </el-button>
              <el-button
                icon="el-icon-refresh-left"
                size="small"
                @click="resetform"
              >
                重置
              </el-button>
            </div>
          </el-row>
        </el-col>
      </el-row>
    </el-form>

    <el-table
      :data="chartData.list"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column
        prop="title"
        label="机构名称"
        show-overflow-tooltip
        align="center"
      ></el-table-column>
      <el-table-column
        prop="total"
        label="总次数"
        show-overflow-tooltip
        align="center"
      ></el-table-column>
      <el-table-column
        prop="qualified"
        label="合格次数"
        show-overflow-tooltip
        align="center"
      ></el-table-column>
      <el-table-column
        prop="fail"
        label="不合格次数"
        show-overflow-tooltip
        align="center"
      ></el-table-column>
      <el-table-column
        prop="qualifiedRate"
        label="合格率"
        show-overflow-tooltip
        align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getSessionStorage } from '@/utils/accessToken'
import { qualified } from '@/api/statistics'
export default {
  components: {},
  data() {
    return {
      topstudentforms: {},
      gettypeOptions: [],
      chartData: {},
      subjectList: [
        { title: '科目一', id: 1 },
        { title: '科目二', id: 2 },
        { title: '科目三', id: 3 },
        { title: '科目四', id: 4 },
      ],
    }
  },
  created() {
    this.getchartData()
  },
  mounted() {
    this.gettypeOptions = getSessionStorage('Options')[1]
  },
  methods: {
    async getchartData() {
      let params = {}
      if (
        this.topstudentforms.startTime &&
        this.topstudentforms.startTime != ''
      ) {
        params.startTime = this.topstudentforms.startTime[0]
        params.endTime = this.topstudentforms.startTime[1]
      }
      if (
        this.topstudentforms.branchId &&
        this.topstudentforms.branchId != ''
      ) {
        params.branchId = this.topstudentforms.branchId.join(',')
      }
      if (this.topstudentforms.subject && this.topstudentforms.subject != '') {
        params.subject = this.topstudentforms.subject.join(',')
      }
      if (this.topstudentforms.carType && this.topstudentforms.carType != '') {
        params.carType = this.topstudentforms.carType.join(',')
      }

      let data = await qualified(params)
      if (data.code == '0000') {
        this.chartData = data.data
         this.$set(this.topstudentforms, 'startTime', this.chartData.date)
      }
    },
    searchlist() {
      this.getchartData()
    },
    resetform() {
      this.$refs['topstudentform'].resetFields()
      this.getchartData()
    },
  },
}
</script>

<style scoped lang='scss'>
</style>